<template>
<div>
  <div class="actual-right">
    <div class="messagefrom">
      <input type="text" v-model="messagefrom" placeholder="请输入车辆信息">
      <div class="hand" @click="messageSubmit"><i class="el-icon-search"></i></div>
    </div>
    <div class="line-post-page">
      <div class="myline-post-page" ref="linePostPage"></div>
      <div class="title-box">
        <div class="top-triangle"></div>
        <div class="num" v-if="LinePostPageDate.vehicleCountDensityLength">
          {{ proFormat2(LinePostPageDate.vehicleCountDensityLength) }}<span>辆/km2</span>
        </div>
        <div class="text nox">当前车辆密度</div>
      </div>
    </div>
    <div class="line-page">
      <LinePage
        :LinePageDate="LinePageDate"
        titleText="车辆数量变化曲线"
        titleColor="#f0f6fb"
        :titleSize="20"
        :textUnit="textUnit"
        :Name="Name"
      ></LinePage>
    </div>
    <div class="warning-message">
      <div class="title">
        告警信息
      </div>
      <div class="message-box">
        <div class="message-list" v-if="messageList1.length">
          <AlertList
            :messageTitle="messageTitle1"
            :messageList="messageList1"
            :isAlertbox="false"
            isMLight="active"
            :isTooltip="false"
          ></AlertList>
        </div>
        <div class="message-list" v-if="messageList2.length">
          <AlertList
            :messageTitle="messageTitle2"
            :messageList="messageList2"
            :isAlertbox="true"
            @isAlertboxClick="isAlertboxClick"
            isMLight="active"
            :isTooltip="true"
          ></AlertList>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import AlertList from '@/components/AlertList'
import {getCarLast24HDensity,getCarDayCountInDays,getRegionAlert,getVehicleAlert,getCarBaseInfo} from '@/api/largescreen'
import { mapMutations, mapState } from 'vuex'
import {parseTime} from '@/utils/ruoyi.js'
import ALargeScreenGroup from '@/components/ALargeScreenGroup/ALargeScreenGroup'
import LinePage from '@/components/Myecharts/LinePage'
import { Message } from 'element-ui'
export default {
  name: 'CarQuantity',
  components:{
    AlertList,
    ALargeScreenGroup,
    LinePage
  },
  data() {
    return {
      messagefrom: '',
      /*右侧24小时车辆密度数据*/
      LinePostPageDate:{},
      /*右侧7天车辆数量数据*/
      LinePageDate:{
        lpweek:[],
        carnum:[],
      },
      textUnit:['(辆)'],
      Name:['车辆数量'],
      /*告警组件title*/
      messageTitle1:['区域'],
      messageTitle2:['车牌','告警信息'],
      /*告警组件数据列表*/
      messageList1:[],
      messageList2:[],

    }
  },
  computed:{
    ...mapState(['map']),
    Mapadcode(){
      return this.map.adcode
    }
  },
  mounted() {
    this.Last24HDensity()
    this.RegionAlert()
    this.VehicleAlert()
  },
  methods: {
    ...mapMutations('map',['SET_SEARCH']),
    messageSubmit(){
      if(this.messagefrom !== ''){
        let str = this.messagefrom.trim()
        getCarBaseInfo({ 'plateNo': str}).then(res=>{
          if (res.code === "00000"){
            if (res.data !== '无此车辆基本信息！'){
              this.SET_SEARCH({
                show: true,
                plateNo: str
              })
            }else {
              Message({
                message: res.data,
                type: 'error',
                duration: 2000
              })
            }
          }
        }).catch(err=>{
          console.log(err)
        })
      }
    },
    DayCountInDays(id){
      // console.log(id)
      /*一周车辆变化接口*/
      let that = this
      /*时间戳*/
      let timestamp = (new Date()).getTime()
      /*计数器*/
      let index = 1;
      /*存储星期与数据数组*/
      let lpweek = [];
      let carnum = [];
      /*接口参数起始时间*/
      let endDay = parseTime(timestamp - 24*60*60*1000).split(' ',1).join('');
      let stDay = parseTime(timestamp - 7*24*60*60*1000).split(' ',1).join('');
      /*调用数据接口*/
      getCarDayCountInDays({'cId':id,'endDay':endDay,'stDay':stDay})
        .then(res=>{
          let data = res.data
          /*计算前一周*/
          for (index;index <= 7 ; index++){
            let newtimestamp = timestamp - index*24*60*60*1000;
            let TimestampStr = parseTime(newtimestamp).split(' ',1).join('');
            /*时间戳格式转换为周几*/
            lpweek.splice(0, 0,that.myfun.getWeek(TimestampStr));
            /*图表数据数组*/
            carnum.splice(0, 0,data[TimestampStr]);
          }
          /*赋值*/
          that.LinePageDate.lpweek = lpweek
          that.LinePageDate.carnum = carnum

        })
        .catch(err=>{
          console.log(err)
        })
    },
    Last24HDensity() {
      /*24小时车辆密度接口*/
      getCarLast24HDensity().then(res=>{
        // console.log(res.data.vehicleCounts)
        let data = res.data.vehicleCounts
        let hourTime = [];
        let vehicleCountDensity = [];
        let vehicleCYCountDensity = [];
        let vehicleRecordsDensity = [];
        for (let i in data){
          hourTime.push(data[i].hourTime)
          vehicleCountDensity.push(Math.round(data[i].vehicleCountDensity))
          vehicleCYCountDensity.push(Math.round(data[i].vehicleCYCountDensity))
          vehicleRecordsDensity.push(Math.round(data[i].vehicleRecordsDensity))
        }

        let vehicleCountDensityLength = vehicleCountDensity[vehicleCountDensity.length - 1]
        this.$set(this.LinePostPageDate,'hourTime', hourTime)
        this.$set(this.LinePostPageDate,'vehicleCountDensity', vehicleCountDensity)
        this.$set(this.LinePostPageDate,'vehicleCountDensityLength', vehicleCountDensityLength)
        this.$set(this.LinePostPageDate,'vehicleCYCountDensity', vehicleCYCountDensity)
        this.$set(this.LinePostPageDate,'vehicleRecordsDensity', vehicleRecordsDensity)
        if(this.$refs.linePostPage !== undefined && vehicleRecordsDensity ){
          this.LinePostPage(this.$refs.linePostPage)
        }
      })
    },
    LinePostPage(ref) {
      let that = this
      let myChart3 = that.$echarts.getInstanceByDom(ref)
      if (myChart3 == undefined){
        myChart3 = that.$echarts.init(ref);
      }
      let Opt = {
        title: {
          text: '24小时车辆密度数据',
          textStyle: {
            color: '#e9eef3',
            fontSize: 20,
            lineHeight: 20,
            fontWeight: 'normal',
            fontFamily: 'Microsoft YaHei',
            overflow: 'truncate',
            width: 200
          },
          padding: [1, 0, 0, 0]
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          renderMode: 'html',
          backgroundColor: '#00000044',
          borderWidth: 0,
          extraCssText: 'box-shadow: 0 0 6px 2px #098e8d;',
          formatter(params, ticket, callback) {
            let htmlStr = ''
            for (let i = 0; i < params.length; i++) {
              let param = params[i]
              let seriesName = param.seriesName//图例名称
              let value = param.value//y轴值
              let color = param.color//图例颜色
              htmlStr += `
                      <div style="font-size: 12px;color:#e9f7f7;">
                        ${seriesName}
                        <div>
                          <span style="font-size: 14px!important;color:${color}!important;">
                           ${value}
                          </span>
                          车/米
                        </div>
                      </div>
                `
            }
            return htmlStr
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start:80,
            minSpan:20,
          },
          {
          showDetail: false, // 拖拽时候是否显示具体数值信息
          showDataShadow: false, // 组件中是否显示数据暗影
          type: 'slider',//图表下方的伸缩条
          show: true, //是否显示
          height: 5,
          backgroundColor: '#0a367e63',
          fillerColor: '#707086',//选中区域颜色
          borderColor: 'transparent',
          handleStyle: {
            opacity: 0
          },
          moveHandleStyle: {
            color: '#707086',
            borderColor: 'transparent',
            borderWidth: 0,
            opacity: 1
          },
          textStyle: {
            show: false
          },
          realtime: true, //拖动时，是否实时更新系列的视图
          start: 80, //伸缩条开始位置（1-100），可以随时更改
          // minSpan: 25,
          // maxSpan: 25,
          left: 142,
          right: 0,
          bottom: 8,
          brushSelect: false
        }],
        legend: {
          type: 'plain',
          icon: 'circle',
          top: -2,
          right: -4,
          width: 345,
          align: 'left',
          itemGap: 13,
          itemWidth: 13,
          itemHeight: 13,
          textStyle: {
            color: '#e9eef3',
            padding: [2, 0, 0, 11],
            rich: {
              a: {
                fontSize: 12
              }
            }
          },
          formatter(pars) {
            return `{a|${pars}}`
          },
          data: ['车辆密度', '柴油车密度', '车辆活动密度']
        },
        grid: {
          left: 142,
          right: '0%',
          bottom: 26,
          top: 42,
          containLabel: true
        },
        xAxis: {
          show: true,
          type: 'category',
          axisTick: {
            'show': false   //去掉x轴刻度线
          },
          axisLabel: {
            color: '#6f6f7c',
            margin: 10,
            fontSize: 14
          },
          axisPointer: {
            show: true,
            type: 'shadow',
            label: {
              show: false
            },
            shadowStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 1, color: '#0439ca00' },
                { offset: 0.6, color: '#10c2d7' },
                { offset: 0.3, color: '#1079eb' },
                { offset: 0, color: '#1065f1' }
              ]),
              opacity: 0.2
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#e5edf733',
              width: 1,
              type: 'dotted'
            }
          },
          data: that.LinePostPageDate.hourTime,
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              width: 1,
              type: 'dotted',
              color: '#e5edf733'
            }
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            name: '车辆密度',
            type: 'line',
            symbolSize: 9,
            data: that.LinePostPageDate.vehicleCountDensity,
            itemStyle: {
              color: '#00ffff',
              borderColor: '#00ffff',
              borderWidth: 2
            }
          },
          {
            name: '柴油车密度',
            type: 'line',
            symbolSize: 9,
            data: that.LinePostPageDate.vehicleCYCountDensity,
            itemStyle: {
              color: '#409eff',
              borderColor: '#409eff',
              borderWidth: 2
            }
          },
          {
            name: '车辆活动密度',
            type: 'line',
            symbolSize: 9,
            data: that.LinePostPageDate.vehicleRecordsDensity,
            itemStyle: {
              color: '#c419f0',
              borderColor: '#c419f0',
              borderWidth: 2
            }
          }
        ]
      }
      myChart3.setOption(Opt)
    },
    proFormat2(number) {
      return this.myfun.myformat(number)
    },
    RegionAlert(){
      getRegionAlert()
        .then(res=>{
          let data = res.data;
          let messageList1 = [];
          for (let key in data ){
            messageList1.push({
              name:key,
              message1:data[key]
            })
          }
          this.messageList1 = messageList1
        })
        .catch(err=>{
          console.log(err)
        })
    },
    VehicleAlert(){
      getVehicleAlert()
        .then(res=>{
          let data = res.data;
          let messageList2 = [];
          for (let key in data ){
            messageList2.push({
              name:key,
              message1:data[key]
            })
          }
          this.messageList2 = messageList2
        })
        .catch(err=>{
          console.log(err)
        })
    },
    isAlertboxClick(name){
      /*告警弹框*/
      let str = name.trim()
      if (str) {
        this.SET_SEARCH({
          show: true,
          plateNo: str
        })
      }
    }
  },
  watch:{
    messageList1:{
      deep:true,
      handler(newValue,oldValue){
          // console.log(newValue,oldValue)
      }
    },
    messageList2:{
      deep:true,
      handler(newValue,oldValue){
          // console.log(newValue,oldValue)
      }
    },
    Mapadcode:{
      immediate:true,
      deep:true,
      handler(newValue,oldValue){
        this.DayCountInDays(newValue)

      }
    }
  }

}
</script>

<style scoped lang="scss">
.actual-right {
  width: 546px;
  height: 100%;
  position: absolute;
  right: 0px;
  top: 0px;
  box-sizing: border-box;

  .messagefrom {
    display: flex;
    box-sizing: border-box;
    padding-left: 4px;
    margin-bottom: 28px;

    input {
      display: block;
      width: 168px;
      height: 39px;
      background: none;
      outline: none;
      border: 1px dotted #f3e8e840;
      padding: 0px 15px;
      box-sizing: border-box;
      line-height: 39px;
      margin-right: 8px;
      font-size: 16px;
      //color: #848a9e;
      color: #dfe3ee;
    }

    div {
      width: 68px;
      height: 39px;
      box-sizing: border-box;
      border: 1px dotted #f3e8e840;
      line-height: 39px;
      text-align: center;
      cursor: pointer;
      font-size: 16px;
      color: #dfe3ee;
    }
  }

  .line-post-page {
    width: 100%;
    height: 179px;
    position: relative;
    margin-bottom: 30px;

    .myline-post-page {
      width: 100%;
      height: 100%;
    }

    .title-box {
      position: absolute;
      left: 0px;
      top: 55px;
      width: 117px;
      height: 106px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: flex-end;
      background-size: cover;
      background: url("~@/assets/images/nox.png") no-repeat center;

      .top-triangle {
        display: block;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-color: transparent;
        border-width: 6px;
        border-bottom-width: 6px;
        border-bottom-color: #fc6b58;
        position: absolute;
        top: 9px;
        right: 12px
      }

      .btm-triangle {
        display: block;
        width: 0px;
        height: 0px;
        opacity: 0.3;
        border-style: solid;
        border-color: transparent;
        border-width: 6px;
        border-top-width: 6px;
        border-top-color: #0ce8ac;
        position: absolute;
        top: 9px;
        right: 12px;
        margin-top: 6px;
      }

      .num {
        box-sizing: border-box;
        margin-bottom: 17px;
        width: 100%;
        text-align: center;
        color: #f0f6fb;
        font-size: 22px;
        line-height: 1;

        span {
          margin-left: 4px;
          font-size: 12px;
        }
      }

      .text {
        box-sizing: border-box;
        margin-bottom: 7px;
        width: 100px;
        height: 29px;
        text-align: center;
        color: #f0f6fb;
        font-size: 14px;
        line-height: 29px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-radius: 2px;
        background-image: linear-gradient(115deg, #40b0f1b3 0%, #07e7f3b3 100%);
      }
    }
  }

  .line-page {
    width: 100%;
    height: 160px;
    margin-bottom: 34px;


  }
  .warning-message{
    width: 100%;
    height: 403px;
    box-sizing: border-box;
    .title{
      width: 100%;
      padding-left: 10px;
      box-sizing: border-box;
      font-size: 20px;
      height: 20px;
      line-height: 20px;
      color: #f0f6fb;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 24px;
    }
    .message-box{
      height: 359px;display: flex;
      .message-list{
        width: 50%;
        height: 100%;
      }
    }
  }
}
</style>
